<template>
  <div class="pic-show">
    <el-carousel
      :initial-index="2"
      trigger="click"
      height="700px">
      <el-carousel-item v-for="item in picShows" :key="item.id">
      <div class="back-img" :style="item.imgBackgroundDiv">
      </div>
      <img  v-bind:src="item.url" align="middle"/>
      <div class="img-title">
        <span>{{item.title}}</span>
      </div>
      <div class="img-content">
        <span>{{item.content}}</span>
      </div>
    </el-carousel-item>
      </el-carousel>
    </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  // 图片轮播
  props: ['picShows']
}
</script>

<style lang="scss">
  $baclgroundBlur: 12px;
  .pic-show {
    max-width: 100%;
    .back-img {
      height: 700px;
      -webkit-filter: blur($baclgroundBlur);
      -moz-filter: blur($baclgroundBlur);
      -o-filter: blur($baclgroundBlur);
      -ms-filter: blur($baclgroundBlur);
      filter: blur($baclgroundBlur);
    }
    img {
      display: block;
      max-width: 1280px;
      margin: 0 auto;
      position: relative;
      top: -700px;
    }

    .img-title {
      position: relative;
      font-size: 40px;
      color: #040682;
      font-weight: 800;
      top: -1200px;
      right: 260px;

      span {
        display: block;
        width: 600px;
        margin: 0 auto;
      }
    }

    .img-content {
      position: relative;
      font-size: 20px;
      color: #e4e7ed;
      top: -1150px;
      text-align: center;
      right: 150px;
      span {
        background-color: rgba(30,36,50, .5);
        padding: 5px 10px;
      }
    }
    .el-carousel__arrow {
      width: 70px;
      height: 70px;
      font-size: 40px;
    }
  }
</style>
